<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>

		<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
	</head>
	<body>
		<div id="app">
			<greet @greet-event="sayHello"></greet>			
		</div>
		
		<script>
			var app = Vue.createApp({
				data() {
					return {
						"message": "Hello Vue!"
					}
				},
				methods:{
					sayHello:function(name){
						alert("你好!"+name)
					}
				}
			});
			
			app.component('greet',{
				template:"<input type='text' v-model='name'/><button @click='doClick'>设置</button>",
				methods:{
					data(){
						return {
							name:""
						}
					},
					doClick:function(){
						console.log("doClick()")
						this.$emit("greetEvent",this.name)
					}
				},
				// emits:['greetEvent']
				emits:{
					// 提交事件
					// return false 没有起作用 ???
					greetEvent: ( name ) => {
						if (name) {
						  return true
						} else {
						  alert('Please input name')
						  return false
						}
					}

					// function(name)
					// {
					// 	console.log("进行验证");
					// 	if(name)
					// 	{
					// 		return true;
					// 	}
					// 	else
					// 	{
					// 		alert("请输入姓名");
					// 		return false;
					// 	}						
					// }
				}
				
			})
			
			var vm = app.mount("#app")
		</script>



	</body>
</html>
